<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('VW查询')" />
</head>
<body class="gray-bg">
<div class="container-div">
<!--        <form id="online-form">-->
        <div class="col-sm-12 search-collapse">
            <div class="col-sm-12">
            <div class="select-list">
                    <ul>
                        <li>
                            <label style="width: 80px">供货商通道：</label>
                            <select name="queryType">
                                <option value="0">ElasticSearch-查询用户</option>
                                <option value="1">ElasticSearch-查询线索池</option>
                                <option value="2">MySQL</option>
                                <option value="3">Redis</option>
                                <option value="4">Clickhouse</option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm"    onclick="search2()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>

                <div class="text-center">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal3">ElasticSearch查询样例</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal4">MySQL查询样例</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal5">Redis查询样例</button>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal6">Clickhouse查询样例</button>
                </div>
                <div class="modal inmodal fade" id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                </button>
                                <h4 class="modal-title">ElasticSearch查询样例</h4>
                            </div>
                            <div class="modal-body">
                                <p>直接填写DSL语句查询</p>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal inmodal fade" id="myModal4" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                </button>
                                <h4 class="modal-title">MySQL查询样例</h4>
                            </div>
                            <div class="modal-body">
                                <p>select field1,field2 from label</p>
                                <p>注意：不要使用 * ，使用具体字段查询</p>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                </button>
                                <h4 class="modal-title">Redis查询样例</h4>
                            </div>
                            <div class="modal-body">
                                {
                                "host":"172.16.24.143",
                                "port":6379,
                                "password":"Avris2@22#!",
                                "db":2,
                                "key":"ruleActionScore_0efe23587e8044d29a680188158c7177"
                                }
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal inmodal fade" id="myModal6" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                </button>
                                <h4 class="modal-title">Clickhouse查询样例</h4>
                            </div>
                            <div class="modal-body">
                                {
                                "sql":"select * from ms_user_profile_d limit 10;",
                                "url":"jdbc:clickhouse://10.86.16.47:8123/avris_main",
                                "user":"sync2avris",
                                "password":"sync_avris123"
                                }
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>

                <br/>

                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <div class="col-xs-10">
                            <textarea id="condition" name="condition" maxlength="500000" class="form-control" rows="50"></textarea>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <div class="col-xs-10">
                            <textarea id="result1" name="result1" maxlength="500000" class="form-control" rows="50">
                                [[${data1}]]
                            </textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--        </form>-->
    </div>

</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script>

    function search2(){
        var env = $('[name="queryType"]').val()
        var condition = $('[name="condition"]').val()
        var url = "/avris/query";
        var data = { "queryType": env ,"condition":condition}
        getVersion(url, "post", "json", data, function (result) {
            $("#result1").text(result.data);
        })
    };


    function getVersion(url, type, dataType, data, callback){
        var config = {
            url: url,
            type: type,
            dataType: dataType,
            data: data,
            success: function(result) {
                if (typeof callback == "function") {
                    callback(result);
                }
            }
        };
        $.ajax(config)
    };


</script>

</body>
</html>